<template>
  <div class="states-item">
    <div class="m-widget25">
      <div class="m-widget25--progress">
        <div class="m-widget25__progress" v-for="(item,index) in viewModel" :key="index" :style="`background-color: ${item.bgcolor};`">
          <span class="m-widget25__progress-number" :style="`color:${item.color};`">
            {{item.name}}
          </span>
          <div class="m--space-10"></div>
          <div class="progress m-progress--sm">
            <div class="progress-bar m--bg-danger" role="progressbar" :style="{width: 25+'%;',background:item.bgcolor}" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
          </div>
          <span class="m-widget25__progress-sub" :style="`color:${item.color};`">
            {{item.intro}}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    props: {
      viewModel: {}
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss">
  @import "./style.scss";
</style>
